<template>
	<div class="tree-box">
		<div class="tree-top">
			<span class="title">{{ headTitle }}</span>
			<span v-if="isTree">
				<el-checkbox
					v-model="checkeAll"
					label="全选"
					size="large"
					@change="checkHandler"
					:disabled="!dataArr.length"
				/>
			</span>
		</div>
		<div class="tree-content">
			<template v-if="dataArr.length">
				<el-tree
					v-if="isTree"
					ref="treeRef"
					:data="dataArr"
					show-checkbox
					default-expand-all
					:props="defaultProps"
					node-key="permissionId"
					@check="nodeClick"
				/>
				<el-select
					v-model="postValue"
					placeholder="请选择岗位"
					multiple
					collapse-tags
					collapse-tags-tooltip
					filterable
					clearable
					style="width: 100%"
					v-else
				>
					<el-option
						v-for="item in dataArr"
						:key="item.postId"
						:label="item.postName"
						:value="item.postId"
					/>
				</el-select>
			</template>
			<el-empty description="暂无数据" v-else />
		</div>
	</div>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import { ElCheckbox, ElTree, ElEmpty, ElSelect, ElOption } from "element-plus";

const props = defineProps({
	data: {
		type: Array,
	},
	isTree: {
		type: Boolean,
		default: true,
	},
});
const defaultProps = {
	label: "name",
	children: "children",
};
let headTitle = ref("");
let dataArr = ref([]);
let treeRef = ref(null);

// ---全选---
let checkeAll = ref(false);
let checkHandler = (val) => {
	if (val) {
		treeRef.value.setCheckedNodes(dataArr.value);
	} else {
		treeRef.value.setCheckedNodes([]);
	}
};

// ---存放父级id，用于全选参数改变---
let parentIds = ref([]);

// ---节点点击---
let nodeClick = (node, currentState) => {
	let signArr = parentIds.value.filter((el) => {
		return treeRef.value.getCheckedKeys().indexOf(el) >= 0;
	});
	if (signArr.length === parentIds.value.length) {
		checkeAll.value = true;
	} else {
		checkeAll.value = false;
	}
};

let postValue = ref([]);

// ---获取选中数据---
let getSelectArr = () => {
	let arr = [];
	if (dataArr.value.length) {
		if (props.isTree) {
			if (treeRef.value) {
				arr = treeRef.value.getCheckedKeys();
			}
		} else {
			arr = postValue.value;
		}
	}
	return arr;
};

// ----清除选中状态---
let clearSelect = () => {
	if (props.isTree) {
		checkeAll.value = false;
		if (treeRef.value) {
			treeRef.value.setCheckedNodes([]);
		}
	} else {
		postValue.value = [];
	}
};

// ---默认选中---
let defaultKeys = (arr) => {
	nextTick(() => {
		for (const obj of arr) {
			if (obj.children.length) {
				defaultKeys(obj.children);
			} else {
				if (obj.chooseStatus === 1) {
					treeRef.value.setChecked(obj.permissionId, true);
				}
			}
		}
		nodeClick();
	});
};

// ---监听数据传递---
watch(
	() => props.data,
	(obj) => {
		headTitle.value = obj.title;
		// console.log(obj.data, "----isTree-----：" + props.isTree);
		if (obj.data.length) {
			dataArr.value = obj.data;
			if (props.isTree) {
				defaultKeys(dataArr.value);
				dataArr.value.forEach((el) => {
					parentIds.value.push(el.permissionId);
				});
			} else {
				let arr = [];
				dataArr.value.map((item) => {
					if (item.chooseStatus === 1) {
						arr.push(item.postId);
					}
				});
				postValue.value = arr;
			}
		}
	},
	{
		immediate: true,
		deep: true,
	}
);

// ---暴露方法---
defineExpose({
	getSelectArr,
	clearSelect,
});
</script>
<style lang="scss" scoped>
.tree-box {
	width: 50%;
	display: flex;
	flex-direction: column;
	.tree-top {
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10%;
		.title {
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: bold;
			color: #000000;
			line-height: 21px;
			margin-right: 5%;
		}
		:deep(.el-checkbox) {
			flex-direction: row-reverse;
			.el-checkbox__label {
				color: #000000;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				padding-left: 0;
				padding-right: 5px;
			}
		}
	}
	.tree-content {
		flex: 5;
		padding: 10px 20px;
		max-height: 500px;
		overflow-y: auto;
		:deep(.el-tree) {
			.el-checkbox__inner {
				border-radius: 1px;
				border: 1px solid #e3e7f1;
			}
			.el-tree-node__label {
				font-size: 16px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				color: #000000;
				line-height: 20px;
			}
		}
	}
}
</style>
